<template>
  <div class>
    <el-row :gutter="50">
      <el-col :span="12">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          max-height="500px"
          @select-all="toSelectAll"
          @select="toSelect"
          ref="singleTable"
        >
          <el-table-column 
            type="selection" 
            align="center"></el-table-column>
          <el-table-column prop="pubNum" label="名称" align="center"></el-table-column>
          <el-table-column prop="type1_name" label="分类" align="center"></el-table-column>
          <el-table-column prop="type1_id" label="id" align="center"></el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="50"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-col>
      <el-col :span="10">
        <el-button type="info" @click="dialogTableVisible = true;">热门公众号 {{selectedList.length}}</el-button>
      </el-col>
    </el-row>
    <div>
      <el-dialog :visible.sync="dialogTableVisible" v-dialogDrag>
        <div slot="title">热门公众号：共{{selectedList.length}}个</div>
        <el-table :data="selectedList" max-height="500px">
          <el-table-column prop="pubNum" label="名称" align="center"></el-table-column>
          <el-table-column prop="type1_name" label="分类" align="center"></el-table-column>
          <el-table-column prop="type1_id" label="id" align="center"></el-table-column>
          <el-table-column prop label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deselected(scope.$index, selectedList)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    // 多写注释呀老铁
    return {
      selectedList:[], // 已选择的
      tableData: [],
      total: 1,
      currentPage: 1,
      gridData: [],
      dialogTableVisible: false
    };
  },
  methods: {
    toSelect(list,item) {
      // index = >-1 就删除这个 否则加入
      const {selectedList} = this;
      const index = this.findIndex2(selectedList,item)
      if(index=== -1){
        this.selectedList = [...this.selectedList,item];
      }else{
        selectedList.splice(index,1);
        this.selectedList = [...selectedList];
      }
      
    },
    toSelectAll(list){
      // 如果全部选中 全部加入
      // 反之全部删除
      const {selectedList,tableData} = this;
      tableData.map(i=>{
          const index = this.findIndex2(selectedList,i);
          if(list.length&&index===-1){
            selectedList.push(i);
          }else if(!list.length&&index>-1){
            selectedList.splice(index,1);
          }
        })
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.test();
    },
    test() {
      let data = {
        showapi_appid: "71694",
        showapi_sign: "c28e2fbffa29421dbd1536ebdbb46a33",
        page: this.currentPage,
        keyword: ""
      };
      this.$axios
        .get("http://route.showapi.com/582-4", {
          params: data
        })
        .then(res => {
          const list = res.data.showapi_res_body.pagebean.contentlist;
          this.tableData = list;
          this.total = res.data.showapi_res_body.pagebean.allNum;
          this.$nextTick(()=>{
            const {selectedList,$refs,tableData} = this;
            selectedList.forEach(ele=>{
              const index = this.findIndex2(tableData,ele);
              if(index>-1){
                  $refs.singleTable.toggleRowSelection(tableData[index],true)
              }
            })
          })
        });
    },
    findIndex2(arr,obj){
      let index = -1;
      arr.map((i,d)=>{
        if(i.id === obj.id){
          index = d;
        }
      })
      return index;
    },
    deselected(index, item) {
      const deleteMember = this.selectedList.splice(index, 1)[0];
      const ind = this.findIndex(this.tableData, deleteMember);
      ind !== -1
        ? this.$refs.singleTable.toggleRowSelection(this.tableData[ind], false)
        : "";
    },
    findIndex(list, obj) {
      var objStr = JSON.stringify(obj);
      return list.reduce((index, ele, i) => {
        if (JSON.stringify(ele) === objStr) {
          return i;
        } else {
          return index;
        }
      }, -1);
    }
  },
  mounted() {
    this.test();
  }
};
</script>
<style  scoped>
</style>